<template>
  <div style="min-width: 300px;width: 100%;">
    <el-form label-position="left" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('Online')">
            <i v-if="device.online" class="el-icon-success success">{{
            $t("Yes")
          }}</i>
            <i v-else class="el-icon-error info">{{ $t("No") }}</i>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.OnOff')">
            <span v-if="map.state === 1">
              <i class="el-icon-open success" /> {{ $t('On') }}
            </span>
            <span v-else>
              <i class="el-icon-turn-off info" /> {{ $t('Off') }}
            </span>
          </el-form-item>
        </el-col>
        <template v-if="device.online">
          <el-col :span="12">
            <el-form-item :label="$t('Count')">
              {{ map.count }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Linked')">{{ map.linked }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Full')">{{ map.full }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('Power')">{{ map.power/10 }}W
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <el-row v-if="device.online">
      <el-col :span="8">
        <el-button :disabled="map.state === 0" icon="el-icon-turn-off" @click="doOperate(device.code,'off')">
          {{ $t('Off') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button :disabled="map.state === 1" icon="el-icon-open" @click="doOperate(device.code,'on')">
          {{ $t('On') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button v-if="map.state === 1" type="text" :disabled="map.state === 0" icon="el-icon-refresh"
          @click="doOperate(device.code,'query')" />
      </el-col>
    </el-row>
    <el-row v-if="values !== undefined">
      <el-col v-for="(value,index) in values" :span="4" :key="'cart_value_'+index">
        {{ value.current }}mA {{ value.voltage }}V
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import BaseController from "./BaseController";
  export default {
    name: "CartChargingController",
    mixins: [BaseController],
    data() {
      return {
        map: {
          state: 0,
        },
        values: []
      }
    },
    methods: {
      setItemDevice(device) {
        console.log('cart controller : ', device)
        console.log(' map : ', device.map)
        if (device.map === null) {
          return
        }
        const {
          state,
          values
        } = device.map
        this.map = {
          ...device.map
        }
        if (state === 0) {
          this.values = []
          return
        }
        if (values !== undefined && values !== null) {
          this.values = []
          for (var i = 0; i < values.length / 2; i++) {
            const index = i * 2
            this.values.push({
              current: values[index] * 20,
              voltage: values[index + 1] / 10
            })
          }
        }
      }
    },
  };

</script>
